<template>
  <div class="container">
    <Header/>
    <div>
      <label>关键字:</label>
      <input type="text"  name="title" v-model="eventQuery.title">
      <a-range-picker @change="onChange" :locale="locale" v-model:value="pickertime" show-time />
      <input type="button" value="搜索" @click="eventQuery.pageNum=1;loadEventList()">
    </div>
    <table>
      <thead>
      <tr>
        <th>关键字</th>
        <th class="sort-th">
          <div class="sort-th-title">搜索指数</div>
          <div class="sort-arrows">
            <a @click="changeSort('search_index','asc')" :class="{'bg-red':eventQuery.sort=='search_index'&&eventQuery.order=='asc'}" href="javascript:void(0)">▲</a>
            <a @click="changeSort('search_index','desc')" :class="{'bg-red':eventQuery.sort=='search_index'&&eventQuery.order=='desc'}" href="javascript:void(0)" title="降序排序">▼</a>
          </div>
        </th>
        <th>作者</th>
        <th class="sort-th">
          <div class="sort-th-title">创建时间</div>
          <div class="sort-arrows">
            <a @click="changeSort('create_time','asc')" :class="{'bg-red':eventQuery.sort=='create_time'&&eventQuery.order=='asc'}" href="javascript:void(0)" title="升序排序">▲</a>
            <a @click="changeSort('create_time','desc')" :class="{'bg-red':eventQuery.sort=='create_time'&&eventQuery.order=='desc'}" href="javascript:void(0)" title="降序排序">▼</a>
          </div>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in pageinfo.list">
        <td>
<!--          <a :href="'detail.html?id='+item.id" v-html="highlightTitle(item.title)"></a>-->
          <router-link
              :to="{ name: 'detail', params: { eventId: item.id }}"
              v-html="highlightTitle(item.title)"></router-link>
        </td>
        <td>{{item.searchIndex}}</td>
        <td>{{item.user!=null?item.user.nickname:'匿名'}}</td>
        <td>{{item.createTime}}
        </td>
      </tr>
      </tbody>
    </table>
    <div class="pagination">
      <a href="javascript:void(0)" @click="changePage(1)">首页</a>
      <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum-1)">&laquo; 上一页</a>
      <a href="javascript:void(0)"
         :class="{paginationok:pageNum==eventQuery.pageNum}"
         v-for="pageNum in pageinfo.navigatepageNums"
         @click="changePage(pageNum)">
        {{pageNum}}
      </a>
      <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum+1)">下一页 &raquo;</a>
      <a href="javascript:void(0)" @click="changePage(pageinfo.pages)">末页</a>
      <span>第 {{eventQuery.pageNum}} 页，共 {{pageinfo.pages}} 页</span>
    </div>
    <!-- 添加事件按钮 -->
    <a-button type="primary"  @click="addEventModalIsShow=true">添加事件</a-button>
    <!-- 添加事件模态框 -->
    <div id="addEventModal" v-show="addEventModalIsShow" class="modal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <span class="close" @click="closeModal">&times;</span>
        <form >
          <label >标题:</label>
          <input type="text" v-model="eventAdd.title" required>
          <label >内容:</label>
          <input type="text" v-model="eventAdd.content" required>
          <label>搜索指数:</label>
          <input type="number" v-model="eventAdd.searchIndex"  required>
          <input type="button" @click="addevent" value="提交">
        </form>
      </div>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import Header from '../components/Header.vue'
import utils from '@/utils/utils.js';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
  name: "Index",
  components:{
    Header,
  },
  data(){
    return{
      locale,
      events:[],
      pageinfo:{},
      eventQuery:{
        pageNum:1,
        pageSize:3,
        title:'',
        sort:'',
        order:'',
        startTime:'',
        endTime:''
      },
      eventAdd:{
        title:'',
        content:'',
        searchIndex:0,
        userId:0
      },
      // pageCount:0,
      addEventModalIsShow:false,
      pickertime:[]
    }
  },
  methods:{
    onChange(time, timeString) {
      console.log(timeString)
      this.value=time
      this.eventQuery.startTime = timeString[0];
      this.eventQuery.endTime = timeString[1];
      console.log(this.eventQuery);
    },
    loadEventList(){
      // if(!utils.isEmpty(this.pickertime)) {
      //   console.log(this.pickertime[0]['$d'],this.pickertime[1]['$d'])
      //   this.eventQuery.startTime = this.pickertime[0]['$d']
      //   this.eventQuery.endTime = this.pickertime[1]['$d']
      // }
      axios.get(`/event/list`,{
        params:{
          ...this.eventQuery
        }
      }).then(res => {
        // console.log(res.data.data)
        this.pageinfo = res.data.data
        // this.events = res.data.data
        // this.pageCount = res.data.pageCount
      })
    },
    changePage(page){
      if(page>=1 && page<=this.pageinfo.pages) {
        this.eventQuery.pageNum = page
        this.loadEventList()
      }
    },
    changeSort(sort,order){
      this.eventQuery.sort=sort
      this.eventQuery.order=order
      this.eventQuery.pageNum=1
      this.loadEventList()
    },
    highlightTitle(text) {
      if(this.eventQuery.title == ""){
        return text;
      }
      const regex = new RegExp(this.eventQuery.title, 'g');
      return text.replace(regex, '<span class="highlight">' + this.eventQuery.title + '</span>');
    },
    closeModal() {
      this.addEventModalIsShow = false
      this.eventAdd = {
        title: '',
        content: '',
        searchIndex: 0,
        // userId: 1
      };
    },
    addevent(){
      if(utils.isEmpty(this.loginUser)){
        alert('请登录后发帖')
        return
      }

      axios.post('/event/add',this.eventAdd).then(res => {
        if(res.data.success){
          this.closeModal();
          alert("id:"+res.data.data.id)
          this.loadEventList();
        }else{
          alert(res.data.message)
        }
      }).catch(reason => {
        console.log(reason.response)
        if(reason.response.status == 401){
          alert("401 token失效")
        }

      })
    },
  },

  created(){
    this.loadEventList()
  },
  mounted(){
    //this.eventAdd.userId = this.loginUser.id
  },
  // 在组件中定义计算属性
  computed: {
    loginUser() {
      return this.$store.state.user;
    }
  }
}
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
}
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
form {
  margin-bottom: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}
thead {
  background-color: hotpink;
  color: white;
}
th, td {
  text-align: left;
  padding: 15px;
  border: 1px solid #ddd;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: hotpink;
}
.pagination span {
  margin: 0 5px;
}

.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;  /* 使用百分比让宽度更自适应 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);  /* 添加阴影 */
  border-radius: 10px;  /* 添加圆角 */
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* 改进表单样式 */
.modal form {
  display: flex;
  flex-direction: column;
}

.modal form label {
  margin-bottom: 5px;
}

.modal form input[type="text"], form input[type="number"] {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.modal form input[type="submit"] {
  background-color: hotpink;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

.modal form input[type="submit"]:hover {
  background-color: #0056b3;
}

/* 排序链接样式 */
.sort-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.sort-arrows a {
  color: white;
  text-decoration: none;
  font-size: 0.7em;
  margin: 2px 0;  /* 上下边距为2px，左右边距为0 */
}

/* 为排序链接添加鼠标悬停效果 */
.sort-arrows a:hover {
  color: #0056b3;
}
.sort-th{
  display: flex;
}
.sort-th-title{
  line-height: 2em;
}

.bg-red{
  color: green !important;
}

.highlight {
  color: red !important; /*或者你想要的任何颜色*/
}


/* 被点击时的样式 */
.paginationok {
  color: #ff0000 !important; /* 设置点击后的链接文字颜色 */
  text-decoration: underline !important; /* 添加下划线 */
}
</style>